<script setup>
import { ref, onActivated } from 'vue';
import { useRouter } from 'vue-router';
import VirtualList from '@/components/virtualList.vue';

const router = useRouter();

defineOptions({
  name: 'L1',
});

console.log('L1-init');

const jump = () => {
  router.push('L2');
};

const list = ref([]);

setTimeout(() => {
  for (let i = 1; i <= 1000; i++) {
    list.value.push({ label: '测试文本' + i });
  }
}, 1000);

const virtualListRef = ref(null);

onActivated(() => {
  console.log('-----L1---onActivated----');

  // 设置滚动条的位置
  const scrollTop = virtualListRef.value.scrollTop;
  virtualListRef.value.scrollTo(scrollTop);
});
</script>

<template>
  <h3>L1</h3>

  <button @click="jump">L2</button>

  <VirtualList
    ref="virtualListRef"
    :data="list"
    :max-height="400"
    auto-reset-scroll-bar
  >
    <template v-slot:default="{ item }">
      {{ item.label }}
    </template>
  </VirtualList>
</template>

<style scoped></style>
